<template>
	<echartBox title="工程统计" width="651px" height="427px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page3ItemBox3",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	methods: {
		// 初始化图表
		initChart() {
			this.build3DBarChart();
		},
		// 构建3D柱状图
		build3DBarChart() {
			let _labelList = this.chartData.map((item) => item.name);
			let _valueList = this.chartData.map((item) => item.value);
			const offsetX = 15;
			const offsetY = 8;
			
			// 绘制左侧面
			const CubeLeft = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const xAxisPoint = shape.xAxisPoint;
					const c0 = [shape.x, shape.y];
					const c1 = [shape.x - offsetX, shape.y - offsetY];
					const c2 = [
						xAxisPoint[0] - offsetX,
						xAxisPoint[1] - offsetY,
					];
					const c3 = [xAxisPoint[0], xAxisPoint[1]];
					ctx.moveTo(c0[0], c0[1])
						?.lineTo(c1[0], c1[1])
						.lineTo(c2[0], c2[1])
						.lineTo(c3[0], c3[1])
						.closePath();
				},
			});
			
			// 绘制右侧面
			const CubeRight = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const xAxisPoint = shape.xAxisPoint;
					const c1 = [shape.x, shape.y];
					const c2 = [xAxisPoint[0], xAxisPoint[1]];
					const c3 = [
						xAxisPoint[0] + offsetX,
						xAxisPoint[1] - offsetY,
					];
					const c4 = [shape.x + offsetX, shape.y - offsetY];
					ctx.moveTo(c1[0], c1[1])
						?.lineTo(c2[0], c2[1])
						.lineTo(c3[0], c3[1])
						.lineTo(c4[0], c4[1])
						.closePath();
				},
			});
			
			// 绘制顶面
			const CubeTop = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const c1 = [shape.x, shape.y];
					const c2 = [shape.x + offsetX, shape.y - offsetY];
					const c3 = [shape.x, shape.y - offsetY * 2];
					const c4 = [shape.x - offsetX, shape.y - offsetY];
					ctx.moveTo(c1[0], c1[1])
						?.lineTo(c2[0], c2[1])
						.lineTo(c3[0], c3[1])
						.lineTo(c4[0], c4[1])
						.closePath();
				},
			});
			
			// 注册三个面图形
			echarts.graphic.registerShape("CubeLeft", CubeLeft);
			echarts.graphic.registerShape("CubeRight", CubeRight);
			echarts.graphic.registerShape("CubeTop", CubeTop);
			
			let chartContainer = this.$refs.chart;
			if (!chartContainer || chartContainer.clientWidth === 0 || chartContainer.clientHeight === 0) {
				console.warn('Chart container not ready, skipping chart initialization');
				return;
			}
			let myChart = echarts.init(chartContainer);

			const option = {
				backgroundColor: "transparent",
				tooltip: {
					show: true,
					trigger: "axis", //axis , item
					backgroundColor: "RGBA(0, 49, 85, 1)",
					borderColor: "rgba(0, 151, 251, 1)",
					borderWidth: 1,
					borderRadius: 0,
					textStyle: {
						color: "#BCE9FC",
						fontSize: 16,
						align: "left",
					},
					},
				grid: {
					left: "8%",
					right: "1%",
					bottom: "1%",
					top: "16%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					data: _labelList,
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.3)",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 15,
					},
				},
				yAxis: {
					name: '单位：万/m³',
					nameTextStyle: {
						color:'#fff'
					},
					type: "value",
					max: 3000,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "dashed",
						},
					},
					axisLabel: {
						color: "#fff",
						fontSize: 15,
					},
				},
				series: [
					{
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([
								api.value(0),
								api.value(1),
							]);
							
							// 左侧面渐变色 (较暗)
							const leftColors = [
								{ offset: 0, color: "#06b5ba" },
								{ offset: 0.5, color: "#05969b" },
								{ offset: 1, color: "#025963" }
							];
							
							// 右侧面渐变色 (较亮)
							const rightColors = [
								{ offset: 0, color: "#08c4c9" },
								{ offset: 0.5, color: "#06a5aa" },
								{ offset: 1, color: "#047380" }
							];
							
							// 顶面颜色
							const topColor = "#08c4c9";
							
							return {
								type: "group",
								children: [
									{
										type: "CubeLeft",
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([
												api.value(0),
												0,
											]),
										},
										style: {
											fill: new echarts.graphic.LinearGradient(
												0,
												0,
												0,
												1,
												leftColors
											),
										},
									},
									{
										type: "CubeRight",
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([
												api.value(0),
												0,
											]),
										},
										style: {
											fill: new echarts.graphic.LinearGradient(
												0,
												0,
												0,
												1,
												rightColors
											),
										},
									},
									{
										type: "CubeTop",
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([
												api.value(0),
												0,
											]),
										},
										style: {
											fill: topColor,
										},
									},
								],
							};
						},
						data: _valueList,
					},
				],
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>